<template>
    <view class="cms-tabs-container">
       

        <!-- 图片或者视频 -->
        <CmsBanner v-if="currentDisplayData && currentDisplayData.bannerUrls" :banner-urls="currentDisplayData.bannerUrls" />

         <!-- 救助项目分类tabs -->
         <view class="project-tabs" v-if="projectTabs.length > 0">
            <view class="tab-content">
                <view 
                    class="tab-item" 
                    v-for="(item, index) in projectTabs" 
                    :key="index" 
                    :class="{ active: currentProjectIndex === index }" 
                    @click="handleProjectTabClick(index)"
                >
                    <image src="../../static/ax.png" mode="widthFix" class="ax-icon"></image>
                    <text class="tab-text">{{ item.title }}</text>
                </view>
            </view>
        </view>

        <!-- 富文本 -->
        <view class="rich-text" v-if="currentDisplayData && currentDisplayData.content">
            <view class="rich-text-content" @click="handleContentClick">
                <view class="mask"></view>
                <MpHtml :content="currentDisplayData.content" class="vhtml" />
            </view>
        </view>

        <!-- 加载状态 -->
        <view class="loading" v-if="loading">
            <text>加载中...</text>
        </view>

        <!-- 插槽内容 -->
        <slot></slot>
    </view>
</template>

<script setup>
    import { ref, onMounted, computed, watch } from 'vue'
    import { getCmsGroupByCateId } from '@/utils/api.js'
    import MpHtml from '@/components/mp-html/mp-html.vue'
    import CmsBanner from '@/components/cms-banner/cms-banner.vue'

    // 定义props
    const props = defineProps({
        type: {
            type: [String, Number],
            required: true
        },
        pageTitle: {
            type: String,
            default: ''
        }
    })

    // 定义事件
    const emit = defineEmits(['tab-change', 'data-loaded', 'project-tab-change'])

    const loading = ref(false)
    
    // 存储所有数据
    const allData = ref({})
    
    // 1级显示数据（页面标题对应的分类）
    const primaryData = ref(null)
    
    // 救助项目分类tabs
    const projectTabs = ref([])
    const currentProjectIndex = ref(-1) // -1表示未选中任何tab，显示1级数据
    
    // 当前显示的数据（根据tab选中状态决定显示1级数据还是选中的项目数据）
    const currentDisplayData = computed(() => {
        if (currentProjectIndex.value >= 0 && projectTabs.value[currentProjectIndex.value]) {
            // 显示选中的项目数据
            return projectTabs.value[currentProjectIndex.value].data
        } else {
            // 显示1级数据
            return primaryData.value
        }
    })

    // 获取数据
    const fetchData = async () => {
        loading.value = true
        try {
            const res = await getCmsGroupByCateId(props.type)
            console.log('res:', res)
            if (res.code === 0 && res.data) {
                // 新数据结构：直接是数组
                const dataArray = Array.isArray(res.data) ? res.data : []
                
                // 存储所有数据
                allData.value = dataArray
                
                // 设置1级显示数据（页面标题对应的分类）
                console.log(props.pageTitle, 'titel----------------')
                if (props.pageTitle) {
                    // 先尝试精确匹配
                    let primaryItem = dataArray.find(item => item.title === props.pageTitle)
                    
                    // 如果没有找到精确匹配，且页面标题是"应急救援"，则查找title为空的数据
                    if (!primaryItem) {
                        primaryItem = dataArray.find(item => !item.title || item.title === '')
                    }
                    
                    if (primaryItem) {
                        primaryData.value = primaryItem
                    }
                }

                console.log('pageTitle:', props.pageTitle, 'primaryData:', primaryData.value)
                
                // 生成救助项目分类tabs，动态从接口获取，排除页面标题对应的分类
                projectTabs.value = []
                dataArray.forEach(item => {
                    // 排除页面标题对应的分类，将其作为1级显示
                    // 同时排除title为空的数据
                    if (item.title !== props.pageTitle && item.title && item.title.trim() !== '') {
                        projectTabs.value.push({
                            title: item.title,
                            data: item
                        })
                    }
                })
                
                // 按照 sortNum 排序，如果没有 sortNum 则按 createTime 倒序排列
                projectTabs.value.sort((a, b) => {
                    const sortNumA = a.data.sortNum
                    const sortNumB = b.data.sortNum
                    
                    // 如果都有 sortNum，按 sortNum 排序
                    if (sortNumA !== null && sortNumA !== undefined && sortNumB !== null && sortNumB !== undefined) {
                        return sortNumA - sortNumB
                    }
                    
                    // 否则按 createTime 倒序排列
                    const timeA = a.data.createTime || ''
                    const timeB = b.data.createTime || ''
                    
                    if (timeA && timeB) {
                        const timestampA = new Date(timeA).getTime()
                        const timestampB = new Date(timeB).getTime()
                        return timestampB - timestampA // 倒序排列
                    }
                    
                    // 如果某个时间为空，则排在后面
                    if (!timeA && !timeB) return 0
                    if (!timeA) return 1
                    if (!timeB) return -1
                    
                    return 0
                })

                console.log(projectTabs.value, '-------------')
                
                // 如果没有页面标题对应的分类，默认选择第一项
                if (!primaryData.value && projectTabs.value.length > 0) {
                    primaryData.value = projectTabs.value[0].data
                    // 移除第一项，避免重复显示
                    projectTabs.value.shift()
                }
                
                // 默认不选中任何项目，显示1级数据
                currentProjectIndex.value = -1
                
                // 触发数据加载完成事件
                emit('data-loaded', {
                    allData: dataArray,
                    projectTabs: projectTabs.value,
                    primaryData: primaryData.value,
                    currentDisplayData: currentDisplayData.value
                })
            }
        } catch (error) {
            console.error('获取数据失败:', error)
            uni.showToast({
                title: '获取数据失败',
                icon: 'none'
            })
        } finally {
            loading.value = false
        }
    }

    onMounted(() => {
        fetchData()
    })

    // 处理救助项目tab点击
    const handleProjectTabClick = (index) => {
        if (currentProjectIndex.value === index) {
            // 如果点击的是当前已选中的tab，则取消选中，回到1级数据显示
            currentProjectIndex.value = -1
        } else {
            // 选中新的tab
            currentProjectIndex.value = index
        }
        
        // 触发项目tab切换事件
        emit('project-tab-change', {
            index: currentProjectIndex.value,
            data: currentDisplayData.value,
            isPrimary: currentProjectIndex.value === -1
        })
    }

    // 监听type变化，重新获取数据
    watch(() => props.type, () => {
        fetchData()
    })

    // 监听pageTitle变化，重新获取数据
    watch(() => props.pageTitle, () => {
        fetchData()
    })

    // 暴露方法给父组件
    defineExpose({
        fetchData,
        currentDisplayData,
        projectTabs,
        currentProjectIndex,
        primaryData
    })

    // 处理内容点击，支持小程序跳转
    const handleContentClick = () => {
        try {
            // 检查是否有内容且包含小程序链接
            if (!currentDisplayData.value?.content || !currentDisplayData.value.content.includes('#小程序://')) {
                return
            }

            // 提取小程序链接
            const regex = /#小程序:\/\/([^#"]+)/g
            const matches = currentDisplayData.value.content.match(regex)
            
            if (!matches || matches.length === 0) {
                return
            }

            // 获取第一个匹配的小程序链接
            const shortLink = matches[0]
            
            // 跳转到小程序
            uni.navigateToMiniProgram({
                shortLink: shortLink,
                success: (res) => {
                    console.log('小程序跳转成功:', res)
                    uni.showToast({
                        title: '跳转成功',
                        icon: 'success',
                        duration: 1500
                    })
                },
                fail: (err) => {
                    console.error('小程序跳转失败:', err)
                    uni.showToast({
                        title: '跳转失败，请重试',
                        icon: 'none',
                        duration: 2000
                    })
                }
            })
        } catch (error) {
            console.error('处理内容点击失败:', error)
            uni.showToast({
                title: '操作失败，请重试',
                icon: 'none',
                duration: 2000
            })
        }
    }
</script>

<style lang="scss" scoped>
    .cms-tabs-container {
        width: 100%;
    }

    // 救助项目分类tabs样式
    .project-tabs {
        overflow: hidden;
        
        .tab-content {
            display: flex;
            flex-wrap: wrap;
            padding: 24rpx 24rpx 0 24rpx;
            justify-content: space-between;
            
            .tab-item {
                width: calc(50% - 24rpx);
                padding: 0 0 0 12rpx;
                cursor: pointer;
                height: 84rpx;
                line-height: 84rpx;
                background: #FFFFFF;
                border-radius: 16rpx 16rpx 16rpx 16rpx;
                border: 2rpx solid #E7E8EB;
                font-size: 24rpx;
                color: rgba(0, 0, 0, 0.90);
                margin-bottom: 24rpx;
                display: flex;
                align-items: center;
                justify-content: left;
                
                &.active {
                    color: #F56948;
                    background: #FFF0EC;
                    border: 2rpx solid #F56948;
                }

                .ax-icon{
                    width: 32rpx;
                    height: 32rpx;
                    margin-right: 5rpx;
                    flex-shrink: 0;
                }
            }
        }
    }

    .image-or-video {
        width: 100%;

        image {
            width: 100%;
            height: 100%;
        }
    }

    .rich-text {
        margin: 24rpx;
        background: #fff;
        border-radius: 16rpx;
        border: 2rpx solid #E7E8EB;
        padding: 32rpx 24rpx;

        .rich-text-content {
            line-height: 44rpx;
            position: relative;

            .mask {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0);
                z-index: 1;
            }
        }
        
        .vhtml {
            line-height: 1.6;
            font-size: 28rpx;
            color: #333;
        }
    }

    .loading {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 999;
        color: #fff;
        font-size: 32rpx;
    }
</style> 